

<script setup>
import {
	UserFilled,
	User,
	Crop,
	EditPen,
	Management
} from '@element-plus/icons-vue'


  //pinia
  import {useUserStore} from '@/stores/user'
	//路由
  import {useRouter} from 'vue-router'
  const userStore = useUserStore();
  const router = useRouter();
  const Layout=()=>{
    ElMessageBox.confirm('若退出请重新登录，您是否要退出？','温馨提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(() => {
      ElMessage({
        type: 'success',
        message: '退出成功',
      })
      userStore.clearToken();
      router.push('/login')
    }).catch(() => {
      ElMessage({
        type: 'info',
        message: '取消退出',
      })
      router.push('/home')
    })
    }

</script>

<template>
	<!-- lcf:
	  el-menu 整个菜单组件
		:default-active="$route.path"  配置默认高亮的菜单项
		router  router选项开启，el-menu-item 的 index 就是点击跳转的路径
  
	  el-menu-item 菜单项
		index="" 配置的是访问的跳转路径，配合default-active的值，实现高亮
注：页面背景颜色或者高亮什么的，后面统一风格之后可以再次修改统一
	-->
	<el-container class="layout-container">
		<el-aside width="200px">
			<!-- <div class="el-aside__logo"></div> -->
			<el-menu active-text-color="#ffd04b" background-color="#232323" :default-active="$route.path" text-color="#fff"
				router>
				<!--lcf: 侧边栏部分写在这,跳转路劲index自己添加,以及图标需自己引入 -->

				<el-menu-item index="/">
					<!-- <el-icon><Promotion /></el-icon> -->
					<span>权限管理等</span>
				</el-menu-item>
				<!--后面有角色管理什么的自行补充....... -->


				<!-- lcf -->
				<el-sub-menu index="/user">
					<template #title>
						<el-icon>
							<UserFilled />
						</el-icon>
						<span>个人中心</span>
					</template>
					<el-menu-item index="/user/profile">
						<el-icon>
							<User />
						</el-icon>
						<span>基本资料</span>
					</el-menu-item>
					<el-menu-item index="/user/avatar">
						<el-icon>
							<Crop />
						</el-icon>
						<span>更换头像</span>
					</el-menu-item>
					<el-menu-item index="/user/password">
						<el-icon>
							<EditPen />
						</el-icon>
						<span>重置密码</span>
					</el-menu-item>
				</el-sub-menu>
				<el-menu-item index="/category">
					<el-icon>
						<Management />
					</el-icon>
					<span>商品分类</span>
				</el-menu-item>
			</el-menu>
		</el-aside>

		<el-container>
			<!-- 顶部区域 -->
			<el-header>
				<div>
					这里是头部区域，下面分别为中间主要区域和footer
					<el-button style="float: right; margin: 8px;" @click="Layout">退 出</el-button>
				</div>

			</el-header>

			<!-- 切换添加过渡效果 fade-slide-->
			<el-main>
				<Transition name="fade-slide">
					<router-view></router-view>
				</Transition>
			</el-main>

			<!-- 底部 -->
			<el-footer>footer电商后台</el-footer>
		</el-container>
	</el-container>
</template>


<style lang="scss" scoped>
.layout-container {
	height: 100vh;

	.el-aside {
		background-color: #232323;

		// &__logo {
		//   height: 120px;
		//   background: url('@/assets/img/logo.png') no-repeat center / 120px auto;
		// }
		.el-menu {
			border-right: none ;

		}
	}

	.el-header {
		background-color: #fff;
		align-items: center;
		justify-content: space-between;

	}
    
	.el-footer {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 14px;
		color: #666;
	}
}
</style>